<template>
  <view class="qiun-columns">
    <view class="qiun-header">
      <view class="qiun-title-dot-light">柱状图</view>
    </view>
    <view class="qiun-charts">
      <!--#ifdef MP-ALIPAY -->
      <canvas
        canvas-id="canvasColumn"
        id="canvasColumn"
        class="charts"
        :style="{
          width: cWidth * pixelRatio + 'px',
          height: cHeight * pixelRatio + 'px',
          transform: 'scale(' + 1 / pixelRatio + ')',
          'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
          'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
        }"
      ></canvas>
      <!--#endif-->
      <!--#ifndef MP-ALIPAY -->
      <canvas
        canvas-id="canvasColumn"
        id="canvasColumn"
        class="charts"
      ></canvas>
      <!--#endif-->
    </view>
  </view>
</template>

<script lang="ts">
import Vue from 'vue';
import Http from 'luch-request';
import UCharts from './u-charts';

const http = new Http();
let uChartsContext = null as any;

export default Vue.extend({
  data: () => ({
    // 尺寸相关
    cWidth: 375,
    cHeight: 250,
    pixelRatio: 1,
    // 图像数据
    columnInfo: {} as any,
  }),
  methods: {
    // 获取图像数据数据
    async getServerData() {
      const { data } = await http.get(
        'https://www.easy-mock.com/mock/5cc586b64fc5576cba3d647b/uni-wx-charts/chartsdata2'
      );
      this.columnInfo = data.data.Column;
      this.showColumn('canvasColumn', this.columnInfo);
    },
    // 生成展示图形
    showColumn(canvasId: string, chartData: any) {
      uChartsContext = new UCharts({
        // 必选项
        $this: this,
        canvasId,
        type: 'column',
        pixelRatio: this.pixelRatio,
        width: this.cWidth * this.pixelRatio,
        height: this.cHeight * this.pixelRatio,

        // 配置项
        animation: true,
        xAxis: {
          disableGrid: true,
        },
        yAxis: {},
        extra: {
          column: {
            width:
              (this.cWidth * this.pixelRatio * 0.45) /
              chartData.categories.length,
          },
        },

        // 展示数据
        categories: chartData.categories,
        series: chartData.series,
      });
    },
    // 图像数据更新
    changeData() {
      uChartsContext.updateData({
        series: this.columnInfo.series,
        categories: this.columnInfo.categories,
      });
    },
  },
  onLoad() {
    // 获取设备像素比
    const systemInfo = uni.getSystemInfoSync();
    if (systemInfo.pixelRatio > 1) {
      //正常这里给2就行，如果pixelRatio=3性能会降低一点
      //this.pixelRatio =systemInfo.pixelRatio;
      this.pixelRatio = 2;
    }
    this.cWidth = uni.upx2px(750);
    this.cHeight = uni.upx2px(500);
  },
});
</script>

<style lang="scss">
page {
  width: 100%;
  background: #f2f2f2;
  overflow-x: hidden;
}
.qiun-columns {
  display: flex;
  flex-direction: column !important;
}

.qiun-header {
  width: 96%;
  margin-top: 10rpx;
  padding: 10rpx 2%;
  flex-wrap: nowrap;
  background: #ffffff;
  .qiun-title-dot-light {
    border-left: 10rpx solid #0ea391;
    padding-left: 10rpx;
    font-size: 32rpx;
    color: #000000;
  }
}
/* 通用样式 */
.qiun-charts,
.charts {
  width: 750rpx;
  height: 500rpx;
  background-color: #ffffff;
}
</style>
